import Taro, { Component } from '@tarojs/taro'
import { View, Image, Progress, Text } from '@tarojs/components'
import { AtAvatar, AtIcon } from 'taro-ui'
import { Header } from '../../common/header'
import { connect } from '@tarojs/redux'
import { State, Props } from './user.interface'
import './index.scss';
import '../../common/header.scss';

@connect(({ user }) => ({
  ...user,
}))


export class Center extends Component<State, Props> {
  constructor(props: Props){
    super(props);
  }

  componentWillMount () {}

  async componentDidMount () { 
    const { dispatch } = this.props;
    await dispatch({
      type: 'user/getUser',
      payload: {}
    })
  }

  handleOrderClick(value){
    Taro.navigateTo({
      url:'/pages/order/index?index=' + value
    });
  }

  handleBindMobile(){
    Taro.navigateTo({
      url:'/pages/login/bindMobile'
    });
  }

  render () {
    const { name, balance, integral, avatar, percent, mobile } = this.props.user;
    return (
      <View className='user-content' style={{background:'#f5f5f5', marginBottom:this.props.mb}}>
        <Header 
          title='个人中心'>
        </Header>
        <View className='user-head'>
          <AtAvatar circle size='large' image={avatar}></AtAvatar>
          <View className="user">
            <View className="user-info">
              <View className='user-name'>{name}</View>
              <Image className="user-v" src='http://images.guoxiaoge.cn/v1@2x.png' mode='widthFix' />
            </View>
            <View className='user-level-progress'>
              <Progress percent={percent}  strokeWidth={2} className='user-level-progress-item' active activeColor='#2CDAFF' />
              <View>{integral}/600</View>
            </View>
            <View className='user-other'>
              <View>
                <View className="user-other-info">
                  绑定手机:
                  {
                    mobile
                    ?
                    <Text>{mobile}</Text>
                    :
                    <Text className='user-not-bind'>未绑定</Text>
                  } 
                </View>
              </View>
              {
                mobile
                ?
                null
                :
                <View className="user-wszl" onClick={this.handleBindMobile.bind(this)}>绑定手机号</View>
              } 
            </View>
          </View>
        </View>
        <View className='user-money'>
          <View className='user-money-item'>
            <AtIcon prefixClass='icon' value='yue' size='20' color='#F2CA28'></AtIcon>
            <View className='ml20'>我的余额: </View>
            <View className='user-money-item-value'>￥{balance}</View>
          </View>
          <View className='vertical-line'></View>
          <View className='user-money-item'>
            <AtIcon prefixClass='icon' value='jifen' size='20' color='#FC6C45'></AtIcon>
            <View className='ml20'>我的积分: </View>
            <View className='user-money-item-value'>{integral}</View>
          </View>
        </View>
        <View className='user-order-content'>
          <View className='user-order-title'>
            <View className='user-order-item'>
              <View className='user-order-title-icon user-order-title-icon-wode'></View>
              <Text>我的订单</Text>
            </View>
            <View className='user-order-item user-order-item-quanbu' onClick={this.handleOrderClick.bind(this, 0)}>
              <Text>全部订单</Text>
              <AtIcon value='chevron-right' size='22' color='#666666'></AtIcon>
            </View>
          </View>
          <View className='user-order-list'>
            <View className='user-order-list-item' onClick={this.handleOrderClick.bind(this, 1)}>
              <AtIcon prefixClass='icon' value='daifukuan' size='30' color='#000'></AtIcon>
              <Text>待付款</Text>
            </View>
            <View className='user-order-list-item' onClick={this.handleOrderClick.bind(this, 2)}>
              <AtIcon prefixClass='icon' value='icon-test' size='30' color='#000'></AtIcon>
              <Text>待发货</Text>
            </View>
            <View className='user-order-list-item' onClick={this.handleOrderClick.bind(this, 3)}>
              <AtIcon prefixClass='icon' value='daishouhuo01' size='30' color='#000'></AtIcon>
              <Text>待收货</Text>
            </View>
            <View className='user-order-list-item' onClick={this.handleOrderClick.bind(this, 4)}>
              <AtIcon prefixClass='icon' value='daipingjia01' size='30' color='#000'></AtIcon>
              <Text>待评价</Text>
            </View>
            <View className='user-order-list-item' onClick={this.handleOrderClick.bind(this, 5)}>
              <AtIcon prefixClass='icon' value='tuikuan' size='30' color='#000'></AtIcon>
              <Text>售后</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
}